<template>
  <a-card :bordered="false" :bodyStyle="{ minHeight: `${layoutContentHeight - pageHeaderHeight}px` }">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :lg="6" :md="8" :sm="24">
            <a-form-item :label="$t('platformManagement.app.appName')">
              <a-input v-model="queryParams.name" allowClear />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="8" :sm="24">
            <a-form-item :label="$t('platformManagement.app.appType')">
              <a-select v-model="queryParams.type" showSearch optionFilterProp="children" placeholder="请选择">
                <a-select-option value="">{{ $t('common.all') }}</a-select-option>
                <a-select-option :value="1">{{ $t('modules.common.internalApp') }}</a-select-option>
                <a-select-option :value="2">{{ $t('modules.common.externalApp') }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="8" :sm="24">
            <a-form-item :label="$t('common.status')">
              <a-select v-model="queryParams.status" showSearch optionFilterProp="children" placeholder="请选择">
                <a-select-option value="">{{ $t('common.all') }}</a-select-option>
                <a-select-option :value="1">{{ $t('common.enabled') }}</a-select-option>
                <a-select-option :value="0">{{ $t('common.disabled') }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="$refs.table.refresh(true)">{{ $t('common.query') }}</a-button>
              <a-button style="margin: 0 24px 0 8px" @click="resetQuery">{{ $t('common.reset') }}</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <a-button v-action:add type="primary" icon="plus" @click="handleCreateApp">{{
        $t('platformManagement.app.newApp')
      }}</a-button>
    </div>
    <s-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      :showPagination="true">
      <span slot="index" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
      <span slot="logo" slot-scope="text, record">
        <a-avatar :src="record.logo | imgURLFilter" />
      </span>
      <span slot="type" slot-scope="text, record">
        {{ record.type | typeMatched }}
      </span>
      <span slot="status" slot-scope="text">
        <a-badge :status="text | statusColorMatched" />
        <span>{{ text | statusMatched }}</span>
      </span>
      <span slot="modifyDate" slot-scope="text, record">
        {{ record.modifyDate | moment }}
      </span>
      <span slot="action" slot-scope="text, record" class="actionsList">
        <a
          v-action:disable
          v-if="record.type === 2 && record.status === 1"
          href="javascript:;"
          @click="handleSwitchApp(record)"
        >{{ $t('common.disable') }}</a
        >
        <a
          v-action:enable
          v-if="record.type === 2 && record.status !== 1"
          href="javascript:;"
          @click="handleSwitchApp(record)"
        >{{ $t('common.enable') }}</a
        >
        <a-divider v-action:edit type="vertical" />
        <router-link v-action:edit :to="{ name: 'applicationInfo', params: { id: record.id } }">{{
          $t('common.edit')
        }}</router-link>
        <a-divider v-action:delete type="vertical" />
        <a-popconfirm @confirm="handleDelApp(record)">
          <div slot="title">
            {{ $t('common.delWarning', { name: $t('platformManagement.app.app').toLowerCase() }) }}
          </div>
          <a v-action:delete :disabled="record.type !== 2 || record.status === 1">{{ $t('common.delete') }}</a>
        </a-popconfirm>
      </span>
    </s-table>
  </a-card>
</template>

<script>
import { i18nRender } from '@/locales/index'
import { layoutMixin } from '@/utils/mixin'
import { STable } from '@/components'
import {
  readApplications,
  createApplication,
  updateApplication,
  updateApplicationStatus,
  delApplication
} from '@/api/application'
import { getQueryParams } from '@/utils/util'

const initialqueryParams = {
  name: '',
  type: '',
  status: ''
}

export default {
  name: 'ApplicationList',
  mixins: [layoutMixin],
  components: {
    STable
  },
  data () {
    return {
      initFlag: true,
      pageParams: {},
      queryParams: { ...initialqueryParams },

      // 加载数据方法 必须为 Promise 对象
      loadData: params => {
        this.loading = true
        const req = {
          pageNo: this.initFlag ? this.pageParams.pageNo || 1 : params.pageNo,
          pageSize: this.initFlag ? this.pageParams.pageSize || 10 : params.pageSize,
          ...this.queryParams
        }

        return readApplications(req)
          .then(res => {
            this.$router.push({
              ...this.$route,
              query: {
                ...params,
                ...getQueryParams(this.queryParams)
              }
            })
            this.initFlag = false
            return res.data
          })
          .finally(() => {
            this.loading = false
          })
      },
      loading: true
    }
  },
  filters: {
    typeMatched (type) {
      const maps = {
        1: i18nRender('modules.common.internalApp'),
        2: i18nRender('modules.common.externalApp'),
        3: i18nRender('modules.common.sysService')
      }

      return maps[type] || ''
    },
    statusMatched (status) {
      const maps = {
        0: i18nRender('common.disabled'),
        1: i18nRender('common.enabled')
      }

      return maps[status] || ''
    },
    statusColorMatched (status) {
      const maps = {
        0: 'default',
        1: 'success'
      }

      return maps[status] || ''
    }
  },
  computed: {
    columns () {
      let colums = [
        {
          title: this.$t('common.index'),
          dataIndex: 'index',
          width: 80,
          scopedSlots: { customRender: 'index' }
        },
        {
          title: this.$t('platformManagement.app.appLogo'),
          dataIndex: 'logo',
          width: 100,
          scopedSlots: { customRender: 'logo' }
        },
        {
          title: this.$t('platformManagement.app.appName'),
          dataIndex: 'name',
          ellipsis: true
        },
        {
          title: this.$t('platformManagement.app.appType'),
          dataIndex: 'type',
          width: 120,
          scopedSlots: { customRender: 'type' }
        },
        {
          title: this.$t('common.status'),
          dataIndex: 'status',
          width: 110,
          scopedSlots: { customRender: 'status' }
        },
        {
          title: this.$t('platformManagement.app.appIntro'),
          dataIndex: 'briefIntro',
          ellipsis: true
        },
        {
          title: this.$t('common.modifyTime'),
          dataIndex: 'modifyDate',
          width: 200,
          scopedSlots: { customRender: 'modifyDate' }
        }
      ]
      if (this.$auth('edit,delete,enable,disable', this.$route.meta.permissionId)) {
        colums = colums.concat({
          title: this.$t('common.action'),
          fixed: 'right',
          width: 200,
          scopedSlots: {
            customRender: 'action'
          }
        })
      }
      return colums
    }
  },
  created () {
    const { pageNo, pageSize, name, type, status } = this.$route.query
    this.queryParams = {
      name,
      type: type ? Number(type) : '',
      status: status || ''
    }
    this.pageParams = {
      pageNo,
      pageSize
    }
  },
  methods: {
    resetQuery () {
      this.queryParams = { ...initialqueryParams }
      this.$refs.table.refresh(true)
    },
    // 新建应用
    handleCreateApp () {
      if (this.loading) return
      this.$router.push({ name: 'applicationInfo' })
    },
    // 修改应用状态
    async handleSwitchApp (info) {
      const { id, status } = info
      const res = await updateApplicationStatus({
        id,
        status: Number(!status)
      })
      if (res.code === 'sso.ok') {
        this.$message.success(res.message)
        this.$refs.table.refresh()
      }
    },
    handleDelApp (record) {
      delApplication({ id: record.id }).then(res => {
        this.$message.success(res.message)
        this.$refs.table.refresh()
      })
    }
  }
}
</script>

<style></style>
